<template>
	<div class="pc-topmsg">
		<div class="topmsg-item">
			<div class="elheader">
				<img src='static/img/logo.png'>
			</div>
			<div>
				<h3>
					{{live.title}}
					<span class="tag-type" :class="upstatus">{{tagtype}}</span>
				</h3>
				<div class="createTime">直播时间：{{live.createTime}}</div>
			</div>
		</div>
		<div>
			<span>主播企业：咪咕企业直播</span>
			<Button  style="margin-left: 20px;color:#fff;" :style="{background:live.labelColor}">进入主页</Button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tagtype: ""
			};
		},
		computed: {
			live() {
				return this.$store.state.liveInfo;
			},
			upstatus() {
				let statue = this.$store.state.liveInfo.status;
				switch (parseInt(statue)) {
					case 0:
						this.tagtype = "预告";
						return {
							status0: true
						};
					case 1:
						this.tagtype = "直播";
						return {
							status1: true
						};
					case 2:
						this.tagtype = "暂停";
						return {
							status2: true
						};
					case 3:
						if (this.$store.state.liveInfo.videoplaySwitch == 1) {
							this.tagtype = "回放";
						} else {
							this.tagtype = "结束";
						}
						return {
							status3: true
						};
					case 4:
						this.tagtype = "回放";
						return {
							status4: true
						};
				}
			}
		}
	};
</script>

<style lang="less" rel=stylesheet/less scoped="scoped">
	.pc-topmsg {
		text-align: left;
		padding: 0 5% 0 5%;
		background: #fff;
		border-bottom: 1px solid #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.elheader {
		margin-right: 20px;
		img {
			height: 100%;
		}
	}

	.createTime {
		color: #999;
		font-size: 15px;
	}

	.topmsg-item {
		margin: 10px 0;
		display: flex;
		align-items: center;
		h3 {
			line-height: 30px;
			font-size: 24px;
			font-weight: 500;
		}

		.tag-type {
			margin-left: 10px;
			padding: 4px 10px;
			vertical-align: middle;
			border-radius: 3px;
			font-size: 12px;
			color: #ffffff;
		}

		.item-li {
			display: flex;

			.host {
				color: #1087dc;
			}
		}
	}

	.status0 {
		background: rgba(106, 212, 202, 0.71);
	}

	.status1 {
		background: rgba(228, 30, 36, 0.91);
	}

	.status2 {
		background: rgba(231, 194, 43, 0.86);
	}

	.status3 {
		background: rgba(72, 212, 134, 0.82);
	}

	.status4 {
		background: rgba(72, 212, 134, 0.81);
	}
</style>
